<template>
  <div class="article-list-container">
    <van-pull-refresh v-model="isLoading" :success-text="refreshText" success-duration="1500" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :error.sync="error" error-text="请求失败，点击重新加载" @load="onLoad">
        <!-- 单元格 -->
        <ArticleItem v-for="(item, index) in list" :key="index" :ArticleItem="item"></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
import ArticleItem from '@/components/home/article-item/index.vue'

export default {
  data() {
    return {
      list: [], // 频道列表数据
      loading: false, // 加载状态 加载时设置为true
      finished: false, // 加载完成状态 加载完成时为true
      timestamp: null, // 请求下一页数据的时间戳
      error: false, // 请求失败状态
      isLoading: true, // 下拉刷新状态--加载完成设置为false
      refreshText: '刷新成功' // 加载完成提示文本
    }
  },
  methods: {
    // onLoad事件,下拉加载
    async onLoad() {
      try {
        // 1.请求用户列表参数
        const { data } = await getArticles({
          channel_id: this.channel.id, // 频道id
          timestamp: this.timestamp || Date.now() // 时间戳
        })
        // 2.定义用户列表数组
        // this.list = data.data.results
        const { results } = data.data
        this.list.push(...results)
        // 3.加载状态结束，将loading设置为false
        this.loading = false
        // 4.数据全部加载完成时，将finished设置为true
        // 判断数据是否加载完成
        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          // 没有数据时,将finished设置为true
          this.finished = true
        }
      } catch (error) {
        console.log(error)
        this.loading = false
        this.error = true
      }
    },
    // 下拉刷新
    async onRefresh() {
      try {
        // 1.获取频道列表数据
        const { data } = await getArticles({
          channel_id: this.channel.id, // 频道id
          timestamp: this.timestamp // 时间戳--获取最新的数据
        })

        // 2.从数据前面添加数据
        const { results } = data.data
        this.list.unshift(...results)

        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          this.isLoading = true
        }

        // 3.加载完成,状态设置为true
        this.isLoading = false

        this.refreshText = `加载完成,更新${results.length}条数据` // 加载完成提示文本
      } catch (error) {
        this.refreshText = '加载失败' // 加载失败提示状态
        this.isLoading = false // 加载失败,设置为false
      }
    }
  },
  props: {
    // 父组件传过来的频道对象
    channel: {
      type: Object,
      require: true
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style lang="less" scoped>
.article-list-container {
  height: 79vh;
  overflow-y: auto;
}
</style>
